<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3373100" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon fan-icon">&#xe64e;</span>
                <div class="name">优惠券</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe620;</span>
                <div class="name">微信支付</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe600;</span>
                <div class="name">alipay</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe61f;</span>
                <div class="name">notice-fill</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe61e;</span>
                <div class="name">订单</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe623;</span>
                <div class="name">alarm-clock</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe624;</span>
                <div class="name">shop</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe621;</span>
                <div class="name">奖品</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe61d;</span>
                <div class="name">分享</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe61a;</span>
                <div class="name">客服</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe61c;</span>
                <div class="name">教程</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe603;</span>
                <div class="name">指南</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe605;</span>
                <div class="name">标签</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe606;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe607;</span>
                <div class="name">娱乐 2</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe608;</span>
                <div class="name">类目</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe609;</span>
                <div class="name">我的</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe60a;</span>
                <div class="name">购物</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe60b;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe60c;</span>
                <div class="name">特权</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe60d;</span>
                <div class="name">钻石</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe60e;</span>
                <div class="name">生活</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe60f;</span>
                <div class="name">指南</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe610;</span>
                <div class="name">购物</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe611;</span>
                <div class="name">特权</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe612;</span>
                <div class="name">生活</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe613;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe614;</span>
                <div class="name">分类</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe615;</span>
                <div class="name">娱乐</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe617;</span>
                <div class="name">标签</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe618;</span>
                <div class="name">钻石</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe619;</span>
                <div class="name">我的</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe61b;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe645;</span>
                <div class="name">circle</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe6d4;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe6d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe616;</span>
                <div class="name">客服</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe844;</span>
                <div class="name">check-circle-fill</div>
                <div class="code-name">&amp;#xe844;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe845;</span>
                <div class="name">left-circle-fill</div>
                <div class="code-name">&amp;#xe845;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe846;</span>
                <div class="name">down-circle-fill</div>
                <div class="code-name">&amp;#xe846;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe847;</span>
                <div class="name">minus-circle-fill</div>
                <div class="code-name">&amp;#xe847;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe848;</span>
                <div class="name">close-circle-fill</div>
                <div class="code-name">&amp;#xe848;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe849;</span>
                <div class="name">info-circle-fill</div>
                <div class="code-name">&amp;#xe849;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe84a;</span>
                <div class="name">up-circle-fill</div>
                <div class="code-name">&amp;#xe84a;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe84b;</span>
                <div class="name">right-circle-fill</div>
                <div class="code-name">&amp;#xe84b;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe84c;</span>
                <div class="name">plus-circle-fill</div>
                <div class="code-name">&amp;#xe84c;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe84d;</span>
                <div class="name">question-circle-fill</div>
                <div class="code-name">&amp;#xe84d;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe84e;</span>
                <div class="name">warning-circle-fill</div>
                <div class="code-name">&amp;#xe84e;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe84f;</span>
                <div class="name">heart-fill</div>
                <div class="code-name">&amp;#xe84f;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe863;</span>
                <div class="name">delete-fill</div>
                <div class="code-name">&amp;#xe863;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe865;</span>
                <div class="name">sound-fill</div>
                <div class="code-name">&amp;#xe865;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe866;</span>
                <div class="name">bell-fill</div>
                <div class="code-name">&amp;#xe866;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe867;</span>
                <div class="name">filter-fill</div>
                <div class="code-name">&amp;#xe867;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe868;</span>
                <div class="name">fire-fill</div>
                <div class="code-name">&amp;#xe868;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe869;</span>
                <div class="name">location-fill</div>
                <div class="code-name">&amp;#xe869;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe86a;</span>
                <div class="name">customerservice-fill</div>
                <div class="code-name">&amp;#xe86a;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe86b;</span>
                <div class="name">eye-fill</div>
                <div class="code-name">&amp;#xe86b;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe86c;</span>
                <div class="name">like-fill</div>
                <div class="code-name">&amp;#xe86c;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe86d;</span>
                <div class="name">lock-fill</div>
                <div class="code-name">&amp;#xe86d;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe86e;</span>
                <div class="name">unlike-fill</div>
                <div class="code-name">&amp;#xe86e;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe86f;</span>
                <div class="name">star-fill</div>
                <div class="code-name">&amp;#xe86f;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe870;</span>
                <div class="name">unlock-fill</div>
                <div class="code-name">&amp;#xe870;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe871;</span>
                <div class="name">phone-fill</div>
                <div class="code-name">&amp;#xe871;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe872;</span>
                <div class="name">edit-fill</div>
                <div class="code-name">&amp;#xe872;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe873;</span>
                <div class="name">pushpin-fill</div>
                <div class="code-name">&amp;#xe873;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe874;</span>
                <div class="name">tag-fill</div>
                <div class="code-name">&amp;#xe874;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe875;</span>
                <div class="name">tags-fill</div>
                <div class="code-name">&amp;#xe875;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe876;</span>
                <div class="name">setting-fill</div>
                <div class="code-name">&amp;#xe876;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe956;</span>
                <div class="name">caret-left</div>
                <div class="code-name">&amp;#xe956;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe957;</span>
                <div class="name">caret-right</div>
                <div class="code-name">&amp;#xe957;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe958;</span>
                <div class="name">caret-up</div>
                <div class="code-name">&amp;#xe958;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe959;</span>
                <div class="name">caret-down</div>
                <div class="code-name">&amp;#xe959;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe95a;</span>
                <div class="name">carry-out</div>
                <div class="code-name">&amp;#xe95a;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe95b;</span>
                <div class="name">check</div>
                <div class="code-name">&amp;#xe95b;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe95c;</span>
                <div class="name">check-circle</div>
                <div class="code-name">&amp;#xe95c;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe95d;</span>
                <div class="name">clock-circle</div>
                <div class="code-name">&amp;#xe95d;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe95e;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe95e;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe95f;</span>
                <div class="name">close-circle</div>
                <div class="code-name">&amp;#xe95f;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe960;</span>
                <div class="name">credit-card</div>
                <div class="code-name">&amp;#xe960;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe961;</span>
                <div class="name">customer-service</div>
                <div class="code-name">&amp;#xe961;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe962;</span>
                <div class="name">copy</div>
                <div class="code-name">&amp;#xe962;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe963;</span>
                <div class="name">delete</div>
                <div class="code-name">&amp;#xe963;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe964;</span>
                <div class="name">dislike</div>
                <div class="code-name">&amp;#xe964;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe965;</span>
                <div class="name">double-left</div>
                <div class="code-name">&amp;#xe965;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe966;</span>
                <div class="name">double-right</div>
                <div class="code-name">&amp;#xe966;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe967;</span>
                <div class="name">down-circle</div>
                <div class="code-name">&amp;#xe967;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe968;</span>
                <div class="name">down</div>
                <div class="code-name">&amp;#xe968;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe969;</span>
                <div class="name">drag</div>
                <div class="code-name">&amp;#xe969;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe96a;</span>
                <div class="name">ellipsis</div>
                <div class="code-name">&amp;#xe96a;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe96b;</span>
                <div class="name">environment</div>
                <div class="code-name">&amp;#xe96b;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe96c;</span>
                <div class="name">edit</div>
                <div class="code-name">&amp;#xe96c;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe96d;</span>
                <div class="name">exclamation-circle</div>
                <div class="code-name">&amp;#xe96d;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe96e;</span>
                <div class="name">eye</div>
                <div class="code-name">&amp;#xe96e;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe96f;</span>
                <div class="name">eye-invisible</div>
                <div class="code-name">&amp;#xe96f;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe970;</span>
                <div class="name">exclamation</div>
                <div class="code-name">&amp;#xe970;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe971;</span>
                <div class="name">filter</div>
                <div class="code-name">&amp;#xe971;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe972;</span>
                <div class="name">fire</div>
                <div class="code-name">&amp;#xe972;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe973;</span>
                <div class="name">form</div>
                <div class="code-name">&amp;#xe973;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe974;</span>
                <div class="name">heart</div>
                <div class="code-name">&amp;#xe974;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe975;</span>
                <div class="name">info</div>
                <div class="code-name">&amp;#xe975;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe976;</span>
                <div class="name">inbox</div>
                <div class="code-name">&amp;#xe976;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe977;</span>
                <div class="name">info-circle</div>
                <div class="code-name">&amp;#xe977;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe978;</span>
                <div class="name">key</div>
                <div class="code-name">&amp;#xe978;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe979;</span>
                <div class="name">left-circle</div>
                <div class="code-name">&amp;#xe979;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe97a;</span>
                <div class="name">left</div>
                <div class="code-name">&amp;#xe97a;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe97b;</span>
                <div class="name">like</div>
                <div class="code-name">&amp;#xe97b;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe97c;</span>
                <div class="name">lock</div>
                <div class="code-name">&amp;#xe97c;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe97d;</span>
                <div class="name">mail</div>
                <div class="code-name">&amp;#xe97d;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe97e;</span>
                <div class="name">man</div>
                <div class="code-name">&amp;#xe97e;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe97f;</span>
                <div class="name">minus-circle</div>
                <div class="code-name">&amp;#xe97f;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe980;</span>
                <div class="name">more</div>
                <div class="code-name">&amp;#xe980;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe981;</span>
                <div class="name">notification</div>
                <div class="code-name">&amp;#xe981;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe982;</span>
                <div class="name">mobile</div>
                <div class="code-name">&amp;#xe982;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe983;</span>
                <div class="name">pay-circle</div>
                <div class="code-name">&amp;#xe983;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe984;</span>
                <div class="name">picture</div>
                <div class="code-name">&amp;#xe984;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe985;</span>
                <div class="name">paper-clip</div>
                <div class="code-name">&amp;#xe985;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe986;</span>
                <div class="name">pause</div>
                <div class="code-name">&amp;#xe986;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe987;</span>
                <div class="name">phone</div>
                <div class="code-name">&amp;#xe987;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe988;</span>
                <div class="name">plus-circle</div>
                <div class="code-name">&amp;#xe988;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe989;</span>
                <div class="name">plus</div>
                <div class="code-name">&amp;#xe989;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe98a;</span>
                <div class="name">pushpin</div>
                <div class="code-name">&amp;#xe98a;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe98b;</span>
                <div class="name">qrcode</div>
                <div class="code-name">&amp;#xe98b;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe98c;</span>
                <div class="name">question-circle</div>
                <div class="code-name">&amp;#xe98c;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe98d;</span>
                <div class="name">question</div>
                <div class="code-name">&amp;#xe98d;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe98e;</span>
                <div class="name">reload</div>
                <div class="code-name">&amp;#xe98e;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe98f;</span>
                <div class="name">right-circle</div>
                <div class="code-name">&amp;#xe98f;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe990;</span>
                <div class="name">retweet</div>
                <div class="code-name">&amp;#xe990;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe991;</span>
                <div class="name">right</div>
                <div class="code-name">&amp;#xe991;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe992;</span>
                <div class="name">scan</div>
                <div class="code-name">&amp;#xe992;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe993;</span>
                <div class="name">safety-certificate</div>
                <div class="code-name">&amp;#xe993;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe994;</span>
                <div class="name">safety</div>
                <div class="code-name">&amp;#xe994;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe995;</span>
                <div class="name">scissor</div>
                <div class="code-name">&amp;#xe995;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe996;</span>
                <div class="name">send</div>
                <div class="code-name">&amp;#xe996;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe997;</span>
                <div class="name">shake</div>
                <div class="code-name">&amp;#xe997;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe998;</span>
                <div class="name">setting</div>
                <div class="code-name">&amp;#xe998;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe999;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe999;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe99a;</span>
                <div class="name">shopping</div>
                <div class="code-name">&amp;#xe99a;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe99b;</span>
                <div class="name">shopping-cart</div>
                <div class="code-name">&amp;#xe99b;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe99c;</span>
                <div class="name">share-alt</div>
                <div class="code-name">&amp;#xe99c;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe99d;</span>
                <div class="name">sound</div>
                <div class="code-name">&amp;#xe99d;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe99e;</span>
                <div class="name">star</div>
                <div class="code-name">&amp;#xe99e;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe99f;</span>
                <div class="name">sync</div>
                <div class="code-name">&amp;#xe99f;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe9a0;</span>
                <div class="name">swap</div>
                <div class="code-name">&amp;#xe9a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe9a1;</span>
                <div class="name">tag</div>
                <div class="code-name">&amp;#xe9a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe9a2;</span>
                <div class="name">tags</div>
                <div class="code-name">&amp;#xe9a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe9a3;</span>
                <div class="name">team</div>
                <div class="code-name">&amp;#xe9a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe9a4;</span>
                <div class="name">taobao</div>
                <div class="code-name">&amp;#xe9a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe9a5;</span>
                <div class="name">transaction</div>
                <div class="code-name">&amp;#xe9a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe9a6;</span>
                <div class="name">up</div>
                <div class="code-name">&amp;#xe9a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe9a7;</span>
                <div class="name">unlock</div>
                <div class="code-name">&amp;#xe9a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe9a8;</span>
                <div class="name">up-circle</div>
                <div class="code-name">&amp;#xe9a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe9a9;</span>
                <div class="name">usergroup-add</div>
                <div class="code-name">&amp;#xe9a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe9aa;</span>
                <div class="name">user-delete</div>
                <div class="code-name">&amp;#xe9aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe9ab;</span>
                <div class="name">user-switch</div>
                <div class="code-name">&amp;#xe9ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe9ac;</span>
                <div class="name">user-add</div>
                <div class="code-name">&amp;#xe9ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe9ad;</span>
                <div class="name">user</div>
                <div class="code-name">&amp;#xe9ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe9ae;</span>
                <div class="name">usergroup-delete</div>
                <div class="code-name">&amp;#xe9ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe9af;</span>
                <div class="name">wallet</div>
                <div class="code-name">&amp;#xe9af;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe9b0;</span>
                <div class="name">warning</div>
                <div class="code-name">&amp;#xe9b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe9b1;</span>
                <div class="name">woman</div>
                <div class="code-name">&amp;#xe9b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe94e;</span>
                <div class="name">alipay</div>
                <div class="code-name">&amp;#xe94e;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe94f;</span>
                <div class="name">arrow-left</div>
                <div class="code-name">&amp;#xe94f;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe950;</span>
                <div class="name">arrow-down</div>
                <div class="code-name">&amp;#xe950;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe951;</span>
                <div class="name">arrow-right</div>
                <div class="code-name">&amp;#xe951;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe952;</span>
                <div class="name">arrow-up</div>
                <div class="code-name">&amp;#xe952;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe953;</span>
                <div class="name">bar-chart</div>
                <div class="code-name">&amp;#xe953;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe954;</span>
                <div class="name">bell</div>
                <div class="code-name">&amp;#xe954;</div>
              </li>
          
            <li class="dib">
              <span class="icon fan-icon">&#xe955;</span>
                <div class="name">camera</div>
                <div class="code-name">&amp;#xe955;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'fan-icon';
  src: url('iconfont.woff2?t=1670516703848') format('woff2'),
       url('iconfont.ttf?t=1670516703848') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.fan-icon {
  font-family: "fan-icon" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="fan-icon"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"fan-icon" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-coupon"></span>
            <div class="name">
              优惠券
            </div>
            <div class="code-name">.icon-byn-coupon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-weixin-square"></span>
            <div class="name">
              微信支付
            </div>
            <div class="code-name">.icon-weixin-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-alipay-square"></span>
            <div class="name">
              alipay
            </div>
            <div class="code-name">.icon-alipay-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-notice"></span>
            <div class="name">
              notice-fill
            </div>
            <div class="code-name">.icon-byn-notice
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-order"></span>
            <div class="name">
              订单
            </div>
            <div class="code-name">.icon-byn-order
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-alarm-clock-o"></span>
            <div class="name">
              alarm-clock
            </div>
            <div class="code-name">.icon-byn-alarm-clock-o
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-shop"></span>
            <div class="name">
              shop
            </div>
            <div class="code-name">.icon-byn-shop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-gift"></span>
            <div class="name">
              奖品
            </div>
            <div class="code-name">.icon-byn-gift
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-share"></span>
            <div class="name">
              分享
            </div>
            <div class="code-name">.icon-byn-share
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-service"></span>
            <div class="name">
              客服
            </div>
            <div class="code-name">.icon-byn-service
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-document"></span>
            <div class="name">
              教程
            </div>
            <div class="code-name">.icon-byn-document
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-zhinan-solid"></span>
            <div class="name">
              指南
            </div>
            <div class="code-name">.icon-byn-zhinan-solid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-tag-solid"></span>
            <div class="name">
              标签
            </div>
            <div class="code-name">.icon-byn-tag-solid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-search-solid"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-byn-search-solid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-voice-solid"></span>
            <div class="name">
              娱乐 2
            </div>
            <div class="code-name">.icon-byn-voice-solid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-menu-solid"></span>
            <div class="name">
              类目
            </div>
            <div class="code-name">.icon-byn-menu-solid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-person-solid"></span>
            <div class="name">
              我的
            </div>
            <div class="code-name">.icon-byn-person-solid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-gouwu-solid"></span>
            <div class="name">
              购物
            </div>
            <div class="code-name">.icon-byn-gouwu-solid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-home-solid"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-byn-home-solid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-crown-solid"></span>
            <div class="name">
              特权
            </div>
            <div class="code-name">.icon-byn-crown-solid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-diamond-solid"></span>
            <div class="name">
              钻石
            </div>
            <div class="code-name">.icon-byn-diamond-solid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-tea-solid"></span>
            <div class="name">
              生活
            </div>
            <div class="code-name">.icon-byn-tea-solid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-zhinan"></span>
            <div class="name">
              指南
            </div>
            <div class="code-name">.icon-byn-zhinan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-gouwu"></span>
            <div class="name">
              购物
            </div>
            <div class="code-name">.icon-byn-gouwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-crown"></span>
            <div class="name">
              特权
            </div>
            <div class="code-name">.icon-byn-crown
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-tea"></span>
            <div class="name">
              生活
            </div>
            <div class="code-name">.icon-byn-tea
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-search"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-byn-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-menu"></span>
            <div class="name">
              分类
            </div>
            <div class="code-name">.icon-byn-menu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-voice"></span>
            <div class="name">
              娱乐
            </div>
            <div class="code-name">.icon-byn-voice
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-tag"></span>
            <div class="name">
              标签
            </div>
            <div class="code-name">.icon-byn-tag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-diamond"></span>
            <div class="name">
              钻石
            </div>
            <div class="code-name">.icon-byn-diamond
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-person"></span>
            <div class="name">
              我的
            </div>
            <div class="code-name">.icon-byn-person
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-byn-home"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-byn-home
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-circle"></span>
            <div class="name">
              circle
            </div>
            <div class="code-name">.icon-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-custom-service"></span>
            <div class="name">
              客服
            </div>
            <div class="code-name">.icon-custom-service
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-check-circle-fill"></span>
            <div class="name">
              check-circle-fill
            </div>
            <div class="code-name">.icon-check-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-left-circle-fill"></span>
            <div class="name">
              left-circle-fill
            </div>
            <div class="code-name">.icon-left-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-down-circle-fill"></span>
            <div class="name">
              down-circle-fill
            </div>
            <div class="code-name">.icon-down-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-minus-circle-fill"></span>
            <div class="name">
              minus-circle-fill
            </div>
            <div class="code-name">.icon-minus-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-close-circle-fill"></span>
            <div class="name">
              close-circle-fill
            </div>
            <div class="code-name">.icon-close-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-info-circle-fill"></span>
            <div class="name">
              info-circle-fill
            </div>
            <div class="code-name">.icon-info-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-up-circle-fill"></span>
            <div class="name">
              up-circle-fill
            </div>
            <div class="code-name">.icon-up-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-right-circle-fill"></span>
            <div class="name">
              right-circle-fill
            </div>
            <div class="code-name">.icon-right-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-plus-circle-fill"></span>
            <div class="name">
              plus-circle-fill
            </div>
            <div class="code-name">.icon-plus-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-question-circle-fill"></span>
            <div class="name">
              question-circle-fill
            </div>
            <div class="code-name">.icon-question-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-warning-circle-fill"></span>
            <div class="name">
              warning-circle-fill
            </div>
            <div class="code-name">.icon-warning-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-heart-fill"></span>
            <div class="name">
              heart-fill
            </div>
            <div class="code-name">.icon-heart-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-delete-fill"></span>
            <div class="name">
              delete-fill
            </div>
            <div class="code-name">.icon-delete-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-sound-fill"></span>
            <div class="name">
              sound-fill
            </div>
            <div class="code-name">.icon-sound-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-bell-fill"></span>
            <div class="name">
              bell-fill
            </div>
            <div class="code-name">.icon-bell-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-filter-fill"></span>
            <div class="name">
              filter-fill
            </div>
            <div class="code-name">.icon-filter-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-fire-fill"></span>
            <div class="name">
              fire-fill
            </div>
            <div class="code-name">.icon-fire-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-location-fill"></span>
            <div class="name">
              location-fill
            </div>
            <div class="code-name">.icon-location-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-customerservice-fill"></span>
            <div class="name">
              customerservice-fill
            </div>
            <div class="code-name">.icon-customerservice-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-eye-fill"></span>
            <div class="name">
              eye-fill
            </div>
            <div class="code-name">.icon-eye-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-like-fill"></span>
            <div class="name">
              like-fill
            </div>
            <div class="code-name">.icon-like-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-lock-fill"></span>
            <div class="name">
              lock-fill
            </div>
            <div class="code-name">.icon-lock-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-unlike-fill"></span>
            <div class="name">
              unlike-fill
            </div>
            <div class="code-name">.icon-unlike-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-star-fill"></span>
            <div class="name">
              star-fill
            </div>
            <div class="code-name">.icon-star-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-unlock-fill"></span>
            <div class="name">
              unlock-fill
            </div>
            <div class="code-name">.icon-unlock-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-phone-fill"></span>
            <div class="name">
              phone-fill
            </div>
            <div class="code-name">.icon-phone-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-edit-fill"></span>
            <div class="name">
              edit-fill
            </div>
            <div class="code-name">.icon-edit-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-pushpin-fill"></span>
            <div class="name">
              pushpin-fill
            </div>
            <div class="code-name">.icon-pushpin-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-tag-fill"></span>
            <div class="name">
              tag-fill
            </div>
            <div class="code-name">.icon-tag-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-tags-fill"></span>
            <div class="name">
              tags-fill
            </div>
            <div class="code-name">.icon-tags-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-setting-fill"></span>
            <div class="name">
              setting-fill
            </div>
            <div class="code-name">.icon-setting-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-caret-left"></span>
            <div class="name">
              caret-left
            </div>
            <div class="code-name">.icon-caret-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-caret-right"></span>
            <div class="name">
              caret-right
            </div>
            <div class="code-name">.icon-caret-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-caret-up"></span>
            <div class="name">
              caret-up
            </div>
            <div class="code-name">.icon-caret-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-caret-down"></span>
            <div class="name">
              caret-down
            </div>
            <div class="code-name">.icon-caret-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-carry-out"></span>
            <div class="name">
              carry-out
            </div>
            <div class="code-name">.icon-carry-out
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-check"></span>
            <div class="name">
              check
            </div>
            <div class="code-name">.icon-check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-check-circle"></span>
            <div class="name">
              check-circle
            </div>
            <div class="code-name">.icon-check-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-clock-circle"></span>
            <div class="name">
              clock-circle
            </div>
            <div class="code-name">.icon-clock-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-close"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.icon-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-close-circle"></span>
            <div class="name">
              close-circle
            </div>
            <div class="code-name">.icon-close-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-credit-card"></span>
            <div class="name">
              credit-card
            </div>
            <div class="code-name">.icon-credit-card
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-customer-service"></span>
            <div class="name">
              customer-service
            </div>
            <div class="code-name">.icon-customer-service
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-copy"></span>
            <div class="name">
              copy
            </div>
            <div class="code-name">.icon-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-delete"></span>
            <div class="name">
              delete
            </div>
            <div class="code-name">.icon-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-dislike"></span>
            <div class="name">
              dislike
            </div>
            <div class="code-name">.icon-dislike
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-double-left"></span>
            <div class="name">
              double-left
            </div>
            <div class="code-name">.icon-double-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-double-right"></span>
            <div class="name">
              double-right
            </div>
            <div class="code-name">.icon-double-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-down-circle"></span>
            <div class="name">
              down-circle
            </div>
            <div class="code-name">.icon-down-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-down"></span>
            <div class="name">
              down
            </div>
            <div class="code-name">.icon-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-drag"></span>
            <div class="name">
              drag
            </div>
            <div class="code-name">.icon-drag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-ellipsis"></span>
            <div class="name">
              ellipsis
            </div>
            <div class="code-name">.icon-ellipsis
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-environment"></span>
            <div class="name">
              environment
            </div>
            <div class="code-name">.icon-environment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-edit"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">.icon-edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-exclamation-circle"></span>
            <div class="name">
              exclamation-circle
            </div>
            <div class="code-name">.icon-exclamation-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-eye"></span>
            <div class="name">
              eye
            </div>
            <div class="code-name">.icon-eye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-eye-invisible"></span>
            <div class="name">
              eye-invisible
            </div>
            <div class="code-name">.icon-eye-invisible
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-exclamation"></span>
            <div class="name">
              exclamation
            </div>
            <div class="code-name">.icon-exclamation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-filter"></span>
            <div class="name">
              filter
            </div>
            <div class="code-name">.icon-filter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-fire"></span>
            <div class="name">
              fire
            </div>
            <div class="code-name">.icon-fire
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-form"></span>
            <div class="name">
              form
            </div>
            <div class="code-name">.icon-form
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-heart"></span>
            <div class="name">
              heart
            </div>
            <div class="code-name">.icon-heart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-info"></span>
            <div class="name">
              info
            </div>
            <div class="code-name">.icon-info
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-inbox"></span>
            <div class="name">
              inbox
            </div>
            <div class="code-name">.icon-inbox
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-info-circle"></span>
            <div class="name">
              info-circle
            </div>
            <div class="code-name">.icon-info-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-key"></span>
            <div class="name">
              key
            </div>
            <div class="code-name">.icon-key
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-left-circle"></span>
            <div class="name">
              left-circle
            </div>
            <div class="code-name">.icon-left-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-left"></span>
            <div class="name">
              left
            </div>
            <div class="code-name">.icon-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-like"></span>
            <div class="name">
              like
            </div>
            <div class="code-name">.icon-like
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-lock"></span>
            <div class="name">
              lock
            </div>
            <div class="code-name">.icon-lock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-mail"></span>
            <div class="name">
              mail
            </div>
            <div class="code-name">.icon-mail
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-man"></span>
            <div class="name">
              man
            </div>
            <div class="code-name">.icon-man
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-minus-circle"></span>
            <div class="name">
              minus-circle
            </div>
            <div class="code-name">.icon-minus-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-more"></span>
            <div class="name">
              more
            </div>
            <div class="code-name">.icon-more
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-notification"></span>
            <div class="name">
              notification
            </div>
            <div class="code-name">.icon-notification
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-mobile"></span>
            <div class="name">
              mobile
            </div>
            <div class="code-name">.icon-mobile
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-pay-circle"></span>
            <div class="name">
              pay-circle
            </div>
            <div class="code-name">.icon-pay-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-picture"></span>
            <div class="name">
              picture
            </div>
            <div class="code-name">.icon-picture
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-paper-clip"></span>
            <div class="name">
              paper-clip
            </div>
            <div class="code-name">.icon-paper-clip
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-pause"></span>
            <div class="name">
              pause
            </div>
            <div class="code-name">.icon-pause
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-phone"></span>
            <div class="name">
              phone
            </div>
            <div class="code-name">.icon-phone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-plus-circle"></span>
            <div class="name">
              plus-circle
            </div>
            <div class="code-name">.icon-plus-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-plus"></span>
            <div class="name">
              plus
            </div>
            <div class="code-name">.icon-plus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-pushpin"></span>
            <div class="name">
              pushpin
            </div>
            <div class="code-name">.icon-pushpin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-qrcode"></span>
            <div class="name">
              qrcode
            </div>
            <div class="code-name">.icon-qrcode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-question-circle"></span>
            <div class="name">
              question-circle
            </div>
            <div class="code-name">.icon-question-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-question"></span>
            <div class="name">
              question
            </div>
            <div class="code-name">.icon-question
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-reload"></span>
            <div class="name">
              reload
            </div>
            <div class="code-name">.icon-reload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-right-circle"></span>
            <div class="name">
              right-circle
            </div>
            <div class="code-name">.icon-right-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-retweet"></span>
            <div class="name">
              retweet
            </div>
            <div class="code-name">.icon-retweet
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-right"></span>
            <div class="name">
              right
            </div>
            <div class="code-name">.icon-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-scan"></span>
            <div class="name">
              scan
            </div>
            <div class="code-name">.icon-scan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-safety-certificate"></span>
            <div class="name">
              safety-certificate
            </div>
            <div class="code-name">.icon-safety-certificate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-safety"></span>
            <div class="name">
              safety
            </div>
            <div class="code-name">.icon-safety
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-scissor"></span>
            <div class="name">
              scissor
            </div>
            <div class="code-name">.icon-scissor
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-send"></span>
            <div class="name">
              send
            </div>
            <div class="code-name">.icon-send
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-shake"></span>
            <div class="name">
              shake
            </div>
            <div class="code-name">.icon-shake
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-setting"></span>
            <div class="name">
              setting
            </div>
            <div class="code-name">.icon-setting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-search1"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.icon-search1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-shopping"></span>
            <div class="name">
              shopping
            </div>
            <div class="code-name">.icon-shopping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-shopping-cart"></span>
            <div class="name">
              shopping-cart
            </div>
            <div class="code-name">.icon-shopping-cart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-share-alt"></span>
            <div class="name">
              share-alt
            </div>
            <div class="code-name">.icon-share-alt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-sound"></span>
            <div class="name">
              sound
            </div>
            <div class="code-name">.icon-sound
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-star"></span>
            <div class="name">
              star
            </div>
            <div class="code-name">.icon-star
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-sync"></span>
            <div class="name">
              sync
            </div>
            <div class="code-name">.icon-sync
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-swap"></span>
            <div class="name">
              swap
            </div>
            <div class="code-name">.icon-swap
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-tag"></span>
            <div class="name">
              tag
            </div>
            <div class="code-name">.icon-tag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-tags"></span>
            <div class="name">
              tags
            </div>
            <div class="code-name">.icon-tags
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-team"></span>
            <div class="name">
              team
            </div>
            <div class="code-name">.icon-team
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-taobao"></span>
            <div class="name">
              taobao
            </div>
            <div class="code-name">.icon-taobao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-transaction"></span>
            <div class="name">
              transaction
            </div>
            <div class="code-name">.icon-transaction
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-up"></span>
            <div class="name">
              up
            </div>
            <div class="code-name">.icon-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-unlock"></span>
            <div class="name">
              unlock
            </div>
            <div class="code-name">.icon-unlock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-up-circle"></span>
            <div class="name">
              up-circle
            </div>
            <div class="code-name">.icon-up-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-usergroup-add"></span>
            <div class="name">
              usergroup-add
            </div>
            <div class="code-name">.icon-usergroup-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-user-delete"></span>
            <div class="name">
              user-delete
            </div>
            <div class="code-name">.icon-user-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-user-switch"></span>
            <div class="name">
              user-switch
            </div>
            <div class="code-name">.icon-user-switch
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-user-add"></span>
            <div class="name">
              user-add
            </div>
            <div class="code-name">.icon-user-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-user"></span>
            <div class="name">
              user
            </div>
            <div class="code-name">.icon-user
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-usergroup-delete"></span>
            <div class="name">
              usergroup-delete
            </div>
            <div class="code-name">.icon-usergroup-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-wallet"></span>
            <div class="name">
              wallet
            </div>
            <div class="code-name">.icon-wallet
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-warning"></span>
            <div class="name">
              warning
            </div>
            <div class="code-name">.icon-warning
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-woman"></span>
            <div class="name">
              woman
            </div>
            <div class="code-name">.icon-woman
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-alipay"></span>
            <div class="name">
              alipay
            </div>
            <div class="code-name">.icon-alipay
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-arrow-left"></span>
            <div class="name">
              arrow-left
            </div>
            <div class="code-name">.icon-arrow-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-arrow-down"></span>
            <div class="name">
              arrow-down
            </div>
            <div class="code-name">.icon-arrow-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-arrow-right"></span>
            <div class="name">
              arrow-right
            </div>
            <div class="code-name">.icon-arrow-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-arrow-up"></span>
            <div class="name">
              arrow-up
            </div>
            <div class="code-name">.icon-arrow-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-bar-chart"></span>
            <div class="name">
              bar-chart
            </div>
            <div class="code-name">.icon-bar-chart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-bell"></span>
            <div class="name">
              bell
            </div>
            <div class="code-name">.icon-bell
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fan-icon icon-camera"></span>
            <div class="name">
              camera
            </div>
            <div class="code-name">.icon-camera
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="fan-icon icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            fan-icon" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-coupon"></use>
                </svg>
                <div class="name">优惠券</div>
                <div class="code-name">#icon-byn-coupon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixin-square"></use>
                </svg>
                <div class="name">微信支付</div>
                <div class="code-name">#icon-weixin-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-alipay-square"></use>
                </svg>
                <div class="name">alipay</div>
                <div class="code-name">#icon-alipay-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-notice"></use>
                </svg>
                <div class="name">notice-fill</div>
                <div class="code-name">#icon-byn-notice</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-order"></use>
                </svg>
                <div class="name">订单</div>
                <div class="code-name">#icon-byn-order</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-alarm-clock-o"></use>
                </svg>
                <div class="name">alarm-clock</div>
                <div class="code-name">#icon-byn-alarm-clock-o</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-shop"></use>
                </svg>
                <div class="name">shop</div>
                <div class="code-name">#icon-byn-shop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-gift"></use>
                </svg>
                <div class="name">奖品</div>
                <div class="code-name">#icon-byn-gift</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-share"></use>
                </svg>
                <div class="name">分享</div>
                <div class="code-name">#icon-byn-share</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-service"></use>
                </svg>
                <div class="name">客服</div>
                <div class="code-name">#icon-byn-service</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-document"></use>
                </svg>
                <div class="name">教程</div>
                <div class="code-name">#icon-byn-document</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-zhinan-solid"></use>
                </svg>
                <div class="name">指南</div>
                <div class="code-name">#icon-byn-zhinan-solid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-tag-solid"></use>
                </svg>
                <div class="name">标签</div>
                <div class="code-name">#icon-byn-tag-solid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-search-solid"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-byn-search-solid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-voice-solid"></use>
                </svg>
                <div class="name">娱乐 2</div>
                <div class="code-name">#icon-byn-voice-solid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-menu-solid"></use>
                </svg>
                <div class="name">类目</div>
                <div class="code-name">#icon-byn-menu-solid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-person-solid"></use>
                </svg>
                <div class="name">我的</div>
                <div class="code-name">#icon-byn-person-solid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-gouwu-solid"></use>
                </svg>
                <div class="name">购物</div>
                <div class="code-name">#icon-byn-gouwu-solid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-home-solid"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-byn-home-solid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-crown-solid"></use>
                </svg>
                <div class="name">特权</div>
                <div class="code-name">#icon-byn-crown-solid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-diamond-solid"></use>
                </svg>
                <div class="name">钻石</div>
                <div class="code-name">#icon-byn-diamond-solid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-tea-solid"></use>
                </svg>
                <div class="name">生活</div>
                <div class="code-name">#icon-byn-tea-solid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-zhinan"></use>
                </svg>
                <div class="name">指南</div>
                <div class="code-name">#icon-byn-zhinan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-gouwu"></use>
                </svg>
                <div class="name">购物</div>
                <div class="code-name">#icon-byn-gouwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-crown"></use>
                </svg>
                <div class="name">特权</div>
                <div class="code-name">#icon-byn-crown</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-tea"></use>
                </svg>
                <div class="name">生活</div>
                <div class="code-name">#icon-byn-tea</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-search"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-byn-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-menu"></use>
                </svg>
                <div class="name">分类</div>
                <div class="code-name">#icon-byn-menu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-voice"></use>
                </svg>
                <div class="name">娱乐</div>
                <div class="code-name">#icon-byn-voice</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-tag"></use>
                </svg>
                <div class="name">标签</div>
                <div class="code-name">#icon-byn-tag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-diamond"></use>
                </svg>
                <div class="name">钻石</div>
                <div class="code-name">#icon-byn-diamond</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-person"></use>
                </svg>
                <div class="name">我的</div>
                <div class="code-name">#icon-byn-person</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-byn-home"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-byn-home</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-circle"></use>
                </svg>
                <div class="name">circle</div>
                <div class="code-name">#icon-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#icon-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-custom-service"></use>
                </svg>
                <div class="name">客服</div>
                <div class="code-name">#icon-custom-service</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-check-circle-fill"></use>
                </svg>
                <div class="name">check-circle-fill</div>
                <div class="code-name">#icon-check-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-left-circle-fill"></use>
                </svg>
                <div class="name">left-circle-fill</div>
                <div class="code-name">#icon-left-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-down-circle-fill"></use>
                </svg>
                <div class="name">down-circle-fill</div>
                <div class="code-name">#icon-down-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-minus-circle-fill"></use>
                </svg>
                <div class="name">minus-circle-fill</div>
                <div class="code-name">#icon-minus-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close-circle-fill"></use>
                </svg>
                <div class="name">close-circle-fill</div>
                <div class="code-name">#icon-close-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-info-circle-fill"></use>
                </svg>
                <div class="name">info-circle-fill</div>
                <div class="code-name">#icon-info-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-up-circle-fill"></use>
                </svg>
                <div class="name">up-circle-fill</div>
                <div class="code-name">#icon-up-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-right-circle-fill"></use>
                </svg>
                <div class="name">right-circle-fill</div>
                <div class="code-name">#icon-right-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-plus-circle-fill"></use>
                </svg>
                <div class="name">plus-circle-fill</div>
                <div class="code-name">#icon-plus-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-question-circle-fill"></use>
                </svg>
                <div class="name">question-circle-fill</div>
                <div class="code-name">#icon-question-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-warning-circle-fill"></use>
                </svg>
                <div class="name">warning-circle-fill</div>
                <div class="code-name">#icon-warning-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-heart-fill"></use>
                </svg>
                <div class="name">heart-fill</div>
                <div class="code-name">#icon-heart-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete-fill"></use>
                </svg>
                <div class="name">delete-fill</div>
                <div class="code-name">#icon-delete-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sound-fill"></use>
                </svg>
                <div class="name">sound-fill</div>
                <div class="code-name">#icon-sound-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bell-fill"></use>
                </svg>
                <div class="name">bell-fill</div>
                <div class="code-name">#icon-bell-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-filter-fill"></use>
                </svg>
                <div class="name">filter-fill</div>
                <div class="code-name">#icon-filter-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fire-fill"></use>
                </svg>
                <div class="name">fire-fill</div>
                <div class="code-name">#icon-fire-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-location-fill"></use>
                </svg>
                <div class="name">location-fill</div>
                <div class="code-name">#icon-location-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-customerservice-fill"></use>
                </svg>
                <div class="name">customerservice-fill</div>
                <div class="code-name">#icon-customerservice-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eye-fill"></use>
                </svg>
                <div class="name">eye-fill</div>
                <div class="code-name">#icon-eye-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-like-fill"></use>
                </svg>
                <div class="name">like-fill</div>
                <div class="code-name">#icon-like-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock-fill"></use>
                </svg>
                <div class="name">lock-fill</div>
                <div class="code-name">#icon-lock-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-unlike-fill"></use>
                </svg>
                <div class="name">unlike-fill</div>
                <div class="code-name">#icon-unlike-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-star-fill"></use>
                </svg>
                <div class="name">star-fill</div>
                <div class="code-name">#icon-star-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-unlock-fill"></use>
                </svg>
                <div class="name">unlock-fill</div>
                <div class="code-name">#icon-unlock-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-phone-fill"></use>
                </svg>
                <div class="name">phone-fill</div>
                <div class="code-name">#icon-phone-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit-fill"></use>
                </svg>
                <div class="name">edit-fill</div>
                <div class="code-name">#icon-edit-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pushpin-fill"></use>
                </svg>
                <div class="name">pushpin-fill</div>
                <div class="code-name">#icon-pushpin-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tag-fill"></use>
                </svg>
                <div class="name">tag-fill</div>
                <div class="code-name">#icon-tag-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tags-fill"></use>
                </svg>
                <div class="name">tags-fill</div>
                <div class="code-name">#icon-tags-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-setting-fill"></use>
                </svg>
                <div class="name">setting-fill</div>
                <div class="code-name">#icon-setting-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caret-left"></use>
                </svg>
                <div class="name">caret-left</div>
                <div class="code-name">#icon-caret-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caret-right"></use>
                </svg>
                <div class="name">caret-right</div>
                <div class="code-name">#icon-caret-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caret-up"></use>
                </svg>
                <div class="name">caret-up</div>
                <div class="code-name">#icon-caret-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caret-down"></use>
                </svg>
                <div class="name">caret-down</div>
                <div class="code-name">#icon-caret-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-carry-out"></use>
                </svg>
                <div class="name">carry-out</div>
                <div class="code-name">#icon-carry-out</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-check"></use>
                </svg>
                <div class="name">check</div>
                <div class="code-name">#icon-check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-check-circle"></use>
                </svg>
                <div class="name">check-circle</div>
                <div class="code-name">#icon-check-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clock-circle"></use>
                </svg>
                <div class="name">clock-circle</div>
                <div class="code-name">#icon-clock-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#icon-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close-circle"></use>
                </svg>
                <div class="name">close-circle</div>
                <div class="code-name">#icon-close-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-credit-card"></use>
                </svg>
                <div class="name">credit-card</div>
                <div class="code-name">#icon-credit-card</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-customer-service"></use>
                </svg>
                <div class="name">customer-service</div>
                <div class="code-name">#icon-customer-service</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-copy"></use>
                </svg>
                <div class="name">copy</div>
                <div class="code-name">#icon-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-delete"></use>
                </svg>
                <div class="name">delete</div>
                <div class="code-name">#icon-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dislike"></use>
                </svg>
                <div class="name">dislike</div>
                <div class="code-name">#icon-dislike</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-double-left"></use>
                </svg>
                <div class="name">double-left</div>
                <div class="code-name">#icon-double-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-double-right"></use>
                </svg>
                <div class="name">double-right</div>
                <div class="code-name">#icon-double-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-down-circle"></use>
                </svg>
                <div class="name">down-circle</div>
                <div class="code-name">#icon-down-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-down"></use>
                </svg>
                <div class="name">down</div>
                <div class="code-name">#icon-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-drag"></use>
                </svg>
                <div class="name">drag</div>
                <div class="code-name">#icon-drag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ellipsis"></use>
                </svg>
                <div class="name">ellipsis</div>
                <div class="code-name">#icon-ellipsis</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-environment"></use>
                </svg>
                <div class="name">environment</div>
                <div class="code-name">#icon-environment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit"></use>
                </svg>
                <div class="name">edit</div>
                <div class="code-name">#icon-edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-exclamation-circle"></use>
                </svg>
                <div class="name">exclamation-circle</div>
                <div class="code-name">#icon-exclamation-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eye"></use>
                </svg>
                <div class="name">eye</div>
                <div class="code-name">#icon-eye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eye-invisible"></use>
                </svg>
                <div class="name">eye-invisible</div>
                <div class="code-name">#icon-eye-invisible</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-exclamation"></use>
                </svg>
                <div class="name">exclamation</div>
                <div class="code-name">#icon-exclamation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-filter"></use>
                </svg>
                <div class="name">filter</div>
                <div class="code-name">#icon-filter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fire"></use>
                </svg>
                <div class="name">fire</div>
                <div class="code-name">#icon-fire</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-form"></use>
                </svg>
                <div class="name">form</div>
                <div class="code-name">#icon-form</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-heart"></use>
                </svg>
                <div class="name">heart</div>
                <div class="code-name">#icon-heart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-info"></use>
                </svg>
                <div class="name">info</div>
                <div class="code-name">#icon-info</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-inbox"></use>
                </svg>
                <div class="name">inbox</div>
                <div class="code-name">#icon-inbox</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-info-circle"></use>
                </svg>
                <div class="name">info-circle</div>
                <div class="code-name">#icon-info-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-key"></use>
                </svg>
                <div class="name">key</div>
                <div class="code-name">#icon-key</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-left-circle"></use>
                </svg>
                <div class="name">left-circle</div>
                <div class="code-name">#icon-left-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-left"></use>
                </svg>
                <div class="name">left</div>
                <div class="code-name">#icon-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-like"></use>
                </svg>
                <div class="name">like</div>
                <div class="code-name">#icon-like</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock"></use>
                </svg>
                <div class="name">lock</div>
                <div class="code-name">#icon-lock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mail"></use>
                </svg>
                <div class="name">mail</div>
                <div class="code-name">#icon-mail</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-man"></use>
                </svg>
                <div class="name">man</div>
                <div class="code-name">#icon-man</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-minus-circle"></use>
                </svg>
                <div class="name">minus-circle</div>
                <div class="code-name">#icon-minus-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more"></use>
                </svg>
                <div class="name">more</div>
                <div class="code-name">#icon-more</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-notification"></use>
                </svg>
                <div class="name">notification</div>
                <div class="code-name">#icon-notification</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mobile"></use>
                </svg>
                <div class="name">mobile</div>
                <div class="code-name">#icon-mobile</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pay-circle"></use>
                </svg>
                <div class="name">pay-circle</div>
                <div class="code-name">#icon-pay-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-picture"></use>
                </svg>
                <div class="name">picture</div>
                <div class="code-name">#icon-picture</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-paper-clip"></use>
                </svg>
                <div class="name">paper-clip</div>
                <div class="code-name">#icon-paper-clip</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pause"></use>
                </svg>
                <div class="name">pause</div>
                <div class="code-name">#icon-pause</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-phone"></use>
                </svg>
                <div class="name">phone</div>
                <div class="code-name">#icon-phone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-plus-circle"></use>
                </svg>
                <div class="name">plus-circle</div>
                <div class="code-name">#icon-plus-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-plus"></use>
                </svg>
                <div class="name">plus</div>
                <div class="code-name">#icon-plus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pushpin"></use>
                </svg>
                <div class="name">pushpin</div>
                <div class="code-name">#icon-pushpin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qrcode"></use>
                </svg>
                <div class="name">qrcode</div>
                <div class="code-name">#icon-qrcode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-question-circle"></use>
                </svg>
                <div class="name">question-circle</div>
                <div class="code-name">#icon-question-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-question"></use>
                </svg>
                <div class="name">question</div>
                <div class="code-name">#icon-question</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-reload"></use>
                </svg>
                <div class="name">reload</div>
                <div class="code-name">#icon-reload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-right-circle"></use>
                </svg>
                <div class="name">right-circle</div>
                <div class="code-name">#icon-right-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-retweet"></use>
                </svg>
                <div class="name">retweet</div>
                <div class="code-name">#icon-retweet</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-right"></use>
                </svg>
                <div class="name">right</div>
                <div class="code-name">#icon-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-scan"></use>
                </svg>
                <div class="name">scan</div>
                <div class="code-name">#icon-scan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-safety-certificate"></use>
                </svg>
                <div class="name">safety-certificate</div>
                <div class="code-name">#icon-safety-certificate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-safety"></use>
                </svg>
                <div class="name">safety</div>
                <div class="code-name">#icon-safety</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-scissor"></use>
                </svg>
                <div class="name">scissor</div>
                <div class="code-name">#icon-scissor</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-send"></use>
                </svg>
                <div class="name">send</div>
                <div class="code-name">#icon-send</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shake"></use>
                </svg>
                <div class="name">shake</div>
                <div class="code-name">#icon-shake</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-setting"></use>
                </svg>
                <div class="name">setting</div>
                <div class="code-name">#icon-setting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search1"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#icon-search1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shopping"></use>
                </svg>
                <div class="name">shopping</div>
                <div class="code-name">#icon-shopping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shopping-cart"></use>
                </svg>
                <div class="name">shopping-cart</div>
                <div class="code-name">#icon-shopping-cart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share-alt"></use>
                </svg>
                <div class="name">share-alt</div>
                <div class="code-name">#icon-share-alt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sound"></use>
                </svg>
                <div class="name">sound</div>
                <div class="code-name">#icon-sound</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-star"></use>
                </svg>
                <div class="name">star</div>
                <div class="code-name">#icon-star</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sync"></use>
                </svg>
                <div class="name">sync</div>
                <div class="code-name">#icon-sync</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-swap"></use>
                </svg>
                <div class="name">swap</div>
                <div class="code-name">#icon-swap</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tag"></use>
                </svg>
                <div class="name">tag</div>
                <div class="code-name">#icon-tag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tags"></use>
                </svg>
                <div class="name">tags</div>
                <div class="code-name">#icon-tags</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-team"></use>
                </svg>
                <div class="name">team</div>
                <div class="code-name">#icon-team</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-taobao"></use>
                </svg>
                <div class="name">taobao</div>
                <div class="code-name">#icon-taobao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-transaction"></use>
                </svg>
                <div class="name">transaction</div>
                <div class="code-name">#icon-transaction</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-up"></use>
                </svg>
                <div class="name">up</div>
                <div class="code-name">#icon-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-unlock"></use>
                </svg>
                <div class="name">unlock</div>
                <div class="code-name">#icon-unlock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-up-circle"></use>
                </svg>
                <div class="name">up-circle</div>
                <div class="code-name">#icon-up-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-usergroup-add"></use>
                </svg>
                <div class="name">usergroup-add</div>
                <div class="code-name">#icon-usergroup-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user-delete"></use>
                </svg>
                <div class="name">user-delete</div>
                <div class="code-name">#icon-user-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user-switch"></use>
                </svg>
                <div class="name">user-switch</div>
                <div class="code-name">#icon-user-switch</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user-add"></use>
                </svg>
                <div class="name">user-add</div>
                <div class="code-name">#icon-user-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user"></use>
                </svg>
                <div class="name">user</div>
                <div class="code-name">#icon-user</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-usergroup-delete"></use>
                </svg>
                <div class="name">usergroup-delete</div>
                <div class="code-name">#icon-usergroup-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wallet"></use>
                </svg>
                <div class="name">wallet</div>
                <div class="code-name">#icon-wallet</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-warning"></use>
                </svg>
                <div class="name">warning</div>
                <div class="code-name">#icon-warning</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-woman"></use>
                </svg>
                <div class="name">woman</div>
                <div class="code-name">#icon-woman</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-alipay"></use>
                </svg>
                <div class="name">alipay</div>
                <div class="code-name">#icon-alipay</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-left"></use>
                </svg>
                <div class="name">arrow-left</div>
                <div class="code-name">#icon-arrow-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-down"></use>
                </svg>
                <div class="name">arrow-down</div>
                <div class="code-name">#icon-arrow-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-right"></use>
                </svg>
                <div class="name">arrow-right</div>
                <div class="code-name">#icon-arrow-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-up"></use>
                </svg>
                <div class="name">arrow-up</div>
                <div class="code-name">#icon-arrow-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bar-chart"></use>
                </svg>
                <div class="name">bar-chart</div>
                <div class="code-name">#icon-bar-chart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bell"></use>
                </svg>
                <div class="name">bell</div>
                <div class="code-name">#icon-bell</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-camera"></use>
                </svg>
                <div class="name">camera</div>
                <div class="code-name">#icon-camera</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
